<!DOCTYPE html>
<html lang="en" xmlns:th="http:www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>物流结算</title>
    <link rel="stylesheet" href="/elementui/index.css">
    <script src="/vue/vue.js"></script>
    <script src="/qs/qs.min.js"></script>
    <script src="/elementui/index.js"></script>
    <script src="/axios/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!--头部-->
    <el-form ref="form" :model="form">
        <el-button round @click="loadPage(1)">全部订单</el-button>
        <el-button type='success' @click="settled">已结算</el-button>
        <el-button type="warning" @click="unSettled">未结算</el-button>
        <el-form-item style="float: right;">
            <el-input v-model="form.name" style="width: 300px" placeholder="请输入运货单号"></el-input>
            <el-button type="primary" round @click="search" >搜索</el-button>
        </el-form-item>
    </el-form>

    <!--中间部分-->
    <el-table :data="settlements" style="width: 100%">
        <el-table-column label="序号">
            <template slot-scope="scope">
                <span>{{scope.row.settlementId}}</span>
            </template>
        </el-table-column>
        <el-table-column label="运货单号">
            <template slot-scope="scope">
                <span>{{scope.row.shippingNum}}</span>
            </template>
        </el-table-column>
        <el-table-column label="订单号">
            <template slot-scope="scope">
                <span>{{scope.row.shipping.orderNum}}</span>
            </template>
        </el-table-column>
        <el-table-column label="物流公司">
            <template slot-scope="scope">
                <span>{{scope.row.logistics.logisticsName}}</span>
            </template>
        </el-table-column>
        <el-table-column label="货物名称">
            <template slot-scope="scope">
                <span>{{scope.row.product.pname}}</span>
            </template>
        </el-table-column>
        <el-table-column label="送货车辆">
            <template slot-scope="scope">
                <span>{{scope.row.vehicle.numberPlate}}</span>
            </template>
        </el-table-column>
        <el-table-column label="出发地">
            <template slot-scope="scope">
                <span>{{scope.row.shipping.startPlace}}</span>
            </template>
        </el-table-column>
        <el-table-column label="到达地">
            <template slot-scope="scope">
                <span>{{scope.row.shipping.endPlace}}</span>
            </template>
        </el-table-column>
        <el-table-column label="运输距离（km）">
            <template slot-scope="scope">
                <span>{{scope.row.shipping.distance}}</span>
            </template>
        </el-table-column>
        <el-table-column label="货物数量">
            <template slot-scope="scope">
                <span>{{scope.row.order.number}}</span>
            </template>
        </el-table-column>
        <el-table-column label="货物重量(g)">
            <template slot-scope="scope">
                <span>{{scope.row.product.pquality}}</span>
            </template>
        </el-table-column>
        <el-table-column label="货物体积(m³)">
            <template slot-scope="scope">
                <span>{{scope.row.productAttribute.pvalue}}</span>
            </template>
        </el-table-column>
        <el-table-column label="状态">
            <template slot-scope="scope">
                <span v-if="scope.row.settlementStatus==='1'">
                    <el-button type='success' disabled round>已结算</el-button>
                </span>
                <span v-if="scope.row.settlementStatus!=1">
                    <el-button type='warning' round>未结算</el-button>
                </span>
            </template>
        </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" circle @click="openSettlement(scope.$index,scope.row)"></el-button>
                </template>
            </el-table-column>
    </el-table>

    <!--分页-->
    <center>
<!--        <el-pagination-->
<!--                background-->
<!--                layout="prev, pager, next"-->
<!--                @current-change="loadPage"-->
<!--                :total="total"-->
<!--                :current-page="current"-->
<!--                :page-size="pageSize">-->
<!--        </el-pagination>-->

        <!--分页查询-->
        <el-pagination    class="pagination"    background
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="current"
                          :page-sizes="[3,5,8,10]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next"
                          :total="total">

        </el-pagination>
    </center>

<!--    修改表单-->
    <el-dialog title="结算" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form-item label="运货单号" :label-width="formLabelWidth">
            <el-input v-model="settlement.shipping.id" type="hidden"></el-input>
        </el-form-item>
        <el-form :model="settlement">
            <el-form-item label="物流公司" :label-width="formLabelWidth">
                <el-select v-model="value1">
                    <el-option
                            v-for="logistic in logistics"
                            :label="logistic.logisticsName"
                            :value="logistic.logisticsId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="运送方式" :label-width="formLabelWidth">
                <el-select v-model="value2">
                    <el-option
                            v-for="method in methods"
                            :label="method.shippingMethodName"
                            :value="method.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="运货单号" :label-width="formLabelWidth">
                <el-input v-model="settlement.shippingNum" readonly autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="订单号" :label-width="formLabelWidth">
                <el-input v-model="settlement.shipping.orderNum" readonly autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="货物名称" :label-width="formLabelWidth">
                <el-input v-model="settlement.product.pname" readonly autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="货物数量" :label-width="formLabelWidth">
                <el-input v-model="settlement.order.number" readonly autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出发地" :label-width="formLabelWidth">
                <el-input v-model="settlement.shipping.startPlace" readonly autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="目的地" :label-width="formLabelWidth">
                <el-input v-model="settlement.shipping.endPlace" readonly autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="货物重量" :label-width="formLabelWidth">
                <el-input v-model="settlement.product.pquality" readonly autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="货物体积" :label-width="formLabelWidth">
                <el-input v-model="settlement.productAttribute.pvalue" readonly autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="结算金额" :label-width="formLabelWidth">
                <el-input v-model="settlement.settlementMoney" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updateSettlement">结算金额</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el:'#app',
        data(){
            return{
                settlements:null,
                shipping:null,
                vehicle:null,
                logistics:null,
                product:null,
                methods:null,
                current:1,      // 当前条数
                total:0,        // 总条数
                pageSize:5,     // 每页条数
                formLabelWidth:'150px',
                value1:'',
                value2:'',
                dialogFormVisible: false,  // 表单的显示
                settlement:{
                    shippingNum:'',
                    settlementMoney:'',
                    product:{
                        pname:'',
                        pquality:'',
                    },
                    productAttribute:{
                        pvalue:'',
                    },
                    shipping:{
                        id:'',
                        orderNum:'',
                        startPlace:'',
                        endPlace:'',
                        shippingMethodId:''
                    },
                    order:{
                        number:'',
                    },
                    logistics:{
                        logisticsName:''
                    }
                },
                form:{
                    name:''
                }
            }
        },

        // 方法区
        methods: {
            // 分页查询
            loadPage(current) {
                this.current = current;
                axios.get("/pageSettlement?current=" + current).then(value => {
                    if(value.data.state == 1){
                        this.settlements = value.data.data.records;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.current = value.data.data.current;
                    }
                })
            },

            // 显示结算框
            openSettlement(index,row){
                this.settlement = row;
                if (row.settlementStatus == 1){
                    this.$message("已结算！")
                }else{
                    console.log(index, row);
                    this.dialogFormVisible = true;
                    // 展示所有的物流公司
                    axios.get("/logistics").then(value => {
                        if (value.data.state == 1){
                            this.logistics = value.data.data;
                        }
                    });
                    //展示所有的运送方式
                    axios.get("/methods").then(value => {
                        if (value.data.state == 1){
                            this.methods = value.data.data;
                        }
                    })
                }
            },

            // 结算
            updateSettlement(){
                // 修改状态和结算金额
                this.settlement.logistics.logisticsName = this.value1;
                this.settlement.shipping.shippingMethodId = this.value2;
                axios.put("/settlement",this.settlement).then(value => {
                    if (value.data.state == 1){
                        this.search();
                    }
                });
                // 修改运送方式
                axios.put("/shipping",this.settlement.shipping).then(value => {
                    if (value.data.state == 1){
                        this.search();
                    }
                });
                this.dialogFormVisible = false;
            },

            // 关闭对话框。清空内容
            closeMyDialog(){
                this.settlement={
                    shippingNum:'',
                        settlementMoney:'',
                        product:{
                        pname:'',
                            pquality:'',
                    },
                    productAttribute:{
                        pvalue:'',
                    },
                    shipping:{
                        id:'',
                            orderNum:'',
                            startPlace:'',
                            endPlace:'',
                            shippingMethodId:''
                    },
                    order:{
                        number:'',
                    },
                    logistics:{
                        logisticsName:''
                    }
                },
                this.value1='';
                this.value2='';
            },

            // 搜索
            search(){
                if (this.form.name.length > 0){
                    axios.post("/searchSettlement/"+this.form.name+"/"+this.current).then(value => {
                        if (value.data.state == 1){
                            this.settlements = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }else {
                    axios.get("/selectSettlements/"+this.pageSize+"?current=" + this.current).then(value => {
                        if(value.data.state == 1){
                            this.settlements = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }

            },

            // 按1,2,3···查
            handleCurrentChange(page){
                this.current = page;
                if (this.form.name.length > 0){
                    axios.get("/selectSettlements/"+this.pageSize+"/"+this.form.name+"?current=" + this.current).then(value => {
                        if (value.data.state == 1) {
                            this.settlements = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }else{
                    axios.get("/selectSettlements/"+this.pageSize+"?current=" + this.current).then(value => {
                        if(value.data.code == 1){
                            this.settlements = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }
            },

            // 按3,5,8···查
            handleSizeChange(size){
                this.pageSize = size;
                if (this.form.name.length > 0){
                    axios.get("/selectSettlements/"+this.pageSize+"/"+this.form.name+"?current=" + this.current).then(value => {
                        if (value.data.state == 1) {
                            this.settlements = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }else{
                    axios.get("/selectSettlements/"+this.pageSize+"?current=" + this.current).then(value => {
                        if(value.data.state == 1){
                            this.settlements = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }

            },

            // 已结算
            settled(){
                axios.get("/settlements/1/"+this.current).then(value => {
                    if (value.data.state == 1){
                        this.settlements = value.data.data.records;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.current = value.data.data.current;
                    }
                });
            },

            // 为结算
            unSettled(){
                axios.get("/settlements/-1/"+this.current).then(value => {
                    if (value.data.state == 1){
                        this.settlements = value.data.data.records;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.current = value.data.data.current;
                    }
                });
            }
        },

        // 挂载
        mounted(){
            this.search();
        },
    })

</script>
</body>
</html>